<template>
  <div>
    <div class="app-panel-title">
      <h5>
        <span>{{template.title}}</span>
      </h5>
    </div>
    <div class="app-panel-content">
      <el-form ref="form" :model="dataTemp" label-width="80px" size="mini">
        <el-row :gutter="10">
          <el-col v-for="(ele,index) in template.content" :key="index" :xs="24" :sm="24*3/ele.c" :md="24*2/ele.c" :lg="24/ele.c" :xl="24/ele.c">
            <el-form-item :label="ele.label" :style="{height:(ele.r*28)+'px'}">
              <!-- 文本 -->
              <el-input v-model="dataTemp[ele.model]" v-if="editStatus && ele.type=='input'"></el-input>
              <!-- 文本域 -->
              <el-input v-model="dataTemp[ele.model]" type="textarea" :rows="ele.r" placeholder="请输入内容" v-else-if="editStatus && ele.type=='textarea'"></el-input>
              <!-- 日期 -->
              <el-date-picker v-model="dataTemp[ele.model]" type="date" placeholder="选择日期" v-else-if="editStatus && ele.type=='date'"></el-date-picker>
              <!-- 单选框 -->
              <el-radio-group v-model="dataTemp[ele.model]" v-else-if="editStatus && ele.type=='radio'">
                <el-radio v-for="item in ele.options" :key="item.value" :label="item.label">{{item.label}}</el-radio>
              </el-radio-group>
              <!-- 复选框 -->
              <el-checkbox-group v-model="dataTemp[ele.model]" v-else-if="editStatus && ele.type=='checkbox'">
                <el-checkbox v-for="item in ele.options" :key="item.value" :label="item.label">{{item.label}}</el-checkbox>
              </el-checkbox-group>
              <!-- 数字 -->
              <el-input-number v-model="dataTemp[ele.model]" v-bind="ele.props" v-else-if="editStatus && ele.type=='number'"></el-input-number>
              <!-- 下拉选 -->
              <el-select v-model="dataTemp[ele.model]" placeholder="请选择" v-else-if="editStatus && ele.type=='select'">
                <el-option v-for="item in ele.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <!-- 级联 -->
              <el-cascader :options="ele.options" v-model="dataTemp[ele.model]" v-else-if="editStatus && ele.type=='cascader'"></el-cascader>
              <!-- 其他 -->
              <span v-else>{{data[ele.model]}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="app-panel-foot">
      <slot name="foot"></slot>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    template: {
      type: Object,
      default: function() {
        return {
          title: "title",
          content: []
        };
      }
    },
    data: {
      type: Object,
      default: function() {
        return {
          checkbox: []
        };
      }
    },
    editStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataTemp: {}
    };
  },
  watch: {
    data: {
      handler: function() {
        this.dataTemp = this.data;
      },
      deep: true
    },
    dataTemp: {
      handler: function() {
        // console.debug("changeData", this.dataTemp);
        this.$emit("changeData", this.dataTemp);
      },
      deep: true
    },
    editStatus: function() {
      this.redata();
    }
  },
  created() {
    // console.debug(this.template);
    this.redata();
  },
  methods: {
    redata() {
      this.dataTemp = JSON.parse(JSON.stringify(this.data));
    }
  }
};
</script>
